<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>CSS Framework Classes</title>
        <link href="../raxan/ui/css/master.css" type="text/css" rel="stylesheet" />
        <!--[if lt IE 8]><link rel="stylesheet" href="../raxan/ui/css/master.ie.css" type="text/css"><![endif]-->
        <link href="../raxan/ui/css/default/theme.css" type="text/css" rel="stylesheet" />
        <style type="text/css">
            .ui-icons li {
                list-style: none;
                display:block;
                width:16px;
                height:16px;
                float:left;
                margin:0 5px 5px 0;
            }
            .jquery-css-header {
                color: #aaa;
                margin-bottom: 10px;
            }
            form fieldset { margin-bottom:0 }
            #frmAddress label { display:block; width:120px; float: left; }
        </style>
    </head>

    <body>
        <div class="container c42 prepend-top">
            <p>Use the <strong>master.css</strong> and <strong>default/theme.css</strong> stylesheets to quickly add style and color to your web site and applications.</p>
            <hr />

            <h2>Headings</h2>
            <hr />
            <h1>Heading 1</h1>
            <h2>Heading 2</h2>
            <h3>Heading 3</h3>
            <h4>Heading 4</h4>
            <h5>Heading 5</h5>
            <h6>Heading 6</h6>

            <hr class="space" />

            <h2 class="caps">Header with class=&quot;caps&quot;</h2>

            <p>&nbsp;</p>

            <h2>Paragraphs, Text &amp; Font Size</h2>
            <hr />
            <p><strong>Normal:</strong> Curabitur porta tincidunt tortor. Curabitur aliquet commodo dui. Nam et elit in dui fringilla malesuada. Nam lacinia lectus non quam sollicitudin pellentesque. Cras sed lorem. Vivamus ultrices vulputate ante. In dignissim. Mauris volutpat rutrum ipsum. Aenean quis libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec nibh risus, volutpat ac, ornare at, molestie a, lectus. Phasellus at lorem at leo consequat consectetuer. Aliquam vitae felis. </p>
            <p class="small"><strong>Small:</strong> Aenean molestie. Nulla sit amet nibh sit amet purus luctus lacinia. Mauris vitae dolor. Mauris eu nunc vel tellus dictum aliquam. Mauris luctus dignissim velit. Nulla convallis risus et turpis. Etiam congue, dolor at aliquam faucibus, lectus arcu posuere elit, quis sodales neque dui a mi. Ut viverra erat quis risus. Suspendisse potenti. In tortor purus, bibendum nec, gravida quis, mattis vel, mauris. Praesent a sem a leo sodales ullamcorper. Nulla facilisi. Vestibulum sagittis malesuada lacus. Etiam consequat sodales mi. Etiam rhoncus volutpat mauris. Donec mauris tortor, congue quis, dapibus quis, ultrices et, risus. In nisi dui, cursus non, ullamcorper sit amet, condimentum id, leo. In felis. Proin gravida lobortis nisl. </p>
            <p class="medium"><strong>Medium:</strong> Maecenas ligula mauris, condimentum ac, fringilla vitae, fringilla vel, enim. Praesent aliquam tortor molestie neque. Praesent in tellus. Vestibulum posuere dolor vitae tellus. Fusce id magna. Pellentesque pharetra orci in sapien. Aliquam augue diam, fermentum eget, pretium sit amet, eleifend vitae, est. Vivamus luctus orci non leo. Donec sollicitudin nibh at nisi. Suspendisse lorem. </p>
            <p class="large"><strong>Large:</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec ligula. Pellentesque mi lorem, lacinia in, mattis nec, hendrerit ut, elit. In sit amet augue ac justo dictum mattis. Nunc varius dolor posuere leo. Curabitur condimentum semper odio. Proin sapien. Nulla faucibus faucibus felis. Mauris lobortis massa et augue. </p>

            <p class="caps"><strong>CAPS:</strong> Aliquam augue diam, fermentum eget, pretium sit amet, eleifend vitae, est.</p>
            <p class="highlight"><strong>Highlight:</strong>  Donec ligula. Pellentesque mi lorem, lacinia in, mattis nec, hendrerit ut, elit.</p>

            <p><img class="left hvspace pad border" src="views/images/flower.jpg"  alt="Flower"  /><strong>Text and Image - left, pad, border &amp; hvspace.</strong> Minim repudiare vulputate ut cum. Has et cibo natum inermis, ei homero takimata repudiare sea, ut errem partem quaestio sed. Saepe scripserit reformidans te nec, no has sonet mollis pericula, quidam detracto appetere nam no. Quo eius utroque at, liber pericula instructior has no. Quo te hinc laudem inermis, has eu aliquip molestie consulatu.
                Natum soluta cum ei, qui no prompta petentium intellegat. Eu eam hinc debitis, nec te quidam adolescens referrentur, sit ubique integre argumentum ut. Latine atomorum delicatissimi nec no. Mei te prima viderer ponderum, at dolor soleat forensibus eam. Putant iriure neglegentur ne vim, ex phaedrum intellegebat eum. Ei per philosophia mediocritatem. Natum soluta cum ei, qui no prompta petentium intellegat.</p>

            <p><img class="right hvspace" src="views/images/flower.jpg" alt="Flower" /><strong>Text and Image - right &amp; hvspace.</strong> Minim repudiare vulputate ut cum. Has et cibo natum inermis, ei homero takimata repudiare sea, ut errem partem quaestio sed. Saepe scripserit reformidans te nec, no has sonet mollis pericula, quidam detracto appetere nam no. Quo eius utroque at, liber pericula instructior has no. Quo te hinc laudem inermis, has eu aliquip molestie consulatu.
                Natum soluta cum ei, qui no prompta petentium intellegat. Eu eam hinc debitis, nec te quidam adolescens referrentur, sit ubique integre argumentum ut. Latine atomorum delicatissimi nec no. Mei te prima viderer ponderum, at dolor soleat forensibus eam. Putant iriure neglegentur ne vim, ex phaedrum intellegebat eum. Ei per philosophia mediocritatem. Eu eam hinc debitis, nec te quidam adolescens referrentur, sit ubique integre argumentum ut. Latine atomorum delicatissimi nec no.</p>

            <blockquote>
                <p><strong>Blockquote:</strong> Curabitur porta tincidunt tortor. Curabitur aliquet commodo dui. Nam et elit in dui fringilla malesuada. Nam lacinia lectus non quam sollicitudin pellentesque. Cras sed lorem. Vivamus ultrices vulputate ante. In dignissim. Mauris volutpat rutrum ipsum. Aenean quis libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec nibh risus, volutpat ac, ornare at, molestie a, lectus. Phasellus at lorem at leo consequat consectetuer. Aliquam vitae felis. </p>
            </blockquote>

            <p>
                <strong>&lt;strong&gt; text</strong><br />
                <dfn>&lt;dfn&gt; definition term</dfn><br />
            <del>&lt;del&gt; deleted text</del><br />
            <em>&lt;em&gt; emphasis</em>
        </p>

        <pre>&lt;pre&gt; preformatted text
        Line 1 white-space
        Line 2 white-space    white-space     white-space
        Line 3  tab1    tab2    tab3    tab4
        </pre>

        <code>&lt;code&gt; code
            function main(){
            var start, i;
            start = new Date();
            alert(start);
            }
        </code>

        <hr class="space" />
        <p>
            <tt>&lt;tt&gt; Teletype text<br />
                Sample monospaced text.</tt>
        </p>

        <address>&lt;address&gt; address<br />
            Mary Jane<br />
            P.O. Box 123<br />
            Planet Earth
        </address>

        <p>
            <abbr>&lt;abbr&gt; abbr</abbr><br />
            <acronym>&lt;acronym&gt; acronym </acronym>
        </p>

        <p>&nbsp;</p>

        <h2>Lists</h2>
        <hr />

        <div class="column c10">
            <ul>
                <li>Unordered list items</li>
                <li>list item 1</li>
                <li>list item 2</li>
                <li>list item 3
                    <ul>
                        <li>Nested unordered list</li>
                        <li>nested item 2</li>
                        <li>nested item 3</li>
                        <li>nested item 4</li>
                        <li>nested item 5</li>
                        <li>nested item 6</li>
                    </ul>
                </li>
                <li>list item 4</li>
                <li>list item 5</li>
            </ul>
        </div>

        <div class="column c9">
            <ol>
                <li>Ordered list items</li>
                <li>list item 1</li>
                <li>list item 2</li>
                <li>list item 3
                    <ol>
                        <li>Nested Ordered list</li>
                        <li>nested item 2</li>
                        <li>nested item 3</li>
                        <li>nested item 4</li>
                        <li>nested item 5</li>
                        <li>nested item 6</li>
                    </ol>
                </li>
                <li>list item 4</li>
                <li>list item 5</li>
            </ol>
        </div>

        <div class="column c8">
            <ol>
                <li>Ordered/Unordered</li>
                <li>list item 1</li>
                <li>list item 2</li>
                <li>list item 3
                    <ul>
                        <li>Nested list</li>
                        <li>nested item 2</li>
                        <li>nested item 3
                            <ul>
                                <li>item 1</li>
                                <li>item 2</li>
                            </ul>
                        </li>
                        <li>nested item 4</li>
                    </ul>
                </li>
                <li>list item 4</li>
                <li>list item 5</li>
            </ol>
        </div>

        <div class="column c9 last">
            <ul>
                <li>item 1
                    <ul>
                        <li>item 1</li>
                        <li>item 2
                            <ul>
                                <li>item 1</li>
                                <li>item 2
                                    <ul>
                                        <li>item 1</li>
                                        <li>item 2</li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>item 3</li>
                <li>item 4</li>
            </ul>
        </div>

        <p class="clear">&nbsp;</p>

        <h2>Paddings, Margins &amp; Borders</h2>
        <hr />

        <div class="column c7 border"><strong>Border</strong> <br />Aliquam ultricies libero nec nisl. Donec at leo ut eros posuere facilisis. </div>
        <div class="column c7 tpb"><strong>Top Border (tpb)</strong> <br />Aliquam ultricies libero nec nisl. Donec at leo ut eros posuere facilisis. </div>
        <div class="column c7 rtb"><strong>Right Border (rtb)</strong> <br />Aliquam ultricies libero nec nisl. Donec at leo ut eros posuere facilisis. </div>
        <div class="column c7 bmb"><strong>Bottom Border (bmb)</strong> <br />Aliquam ultricies libero nec nisl. Donec at leo ut eros posuere facilisis. </div>
        <div class="column c7 ltb"><strong>Left Border (ltb)</strong> <br />Aliquam ultricies libero nec nisl. Donec at leo ut eros posuere facilisis. </div>

        <hr class="space" />

        <div class="column c10 hlf-pad lightgray"><strong>Half Padding (hlf-pad)</strong> <br />Aliquam ultricies libero nec nisl. Donec at leo ut eros posuere facilisis. Donec eget arcu in felis tristique dapibus. Aliquam erat volutpat.</div>
        <div class="column c10 pad lightgray"><strong>Padding (pad)</strong> <br />Aliquam ultricies libero nec nisl. Donec at leo ut eros posuere facilisis. Donec eget arcu in felis tristique dapibus. Aliquam erat volutpat.</div>
        <div class="column c10 dbl-pad lightgray"><strong>Double Padding (dbl-pad)</strong> <br />Aliquam ultricies libero nec nisl. Donec at leo ut eros posuere facilisis. Donec eget arcu in felis tristique dapibus. Aliquam erat volutpat.</div>

        <hr class="space" />
        <div class="column c6 border ">
            <div class="margin lightgray"><strong>Margin</strong> <br />Aliquam ultricies libero nec nisl. Donec at leo ut eros posuere facilisis. </div>
        </div>
        <div class="column c6 border ">
            <div class="tpm lightgray"><strong>Top Margin (tpm)</strong> <br />Aliquam ultricies libero nec nisl. Donec at leo ut eros posuere facilisis. </div>
        </div>

        <div class="column c6 border ">
            <div class="rtm lightgray"><strong>Right Margin (rtm)</strong> <br />Aliquam ultricies libero nec nisl. Donec at leo ut eros posuere facilisis. </div>
        </div>

        <div class="column c6 border ">
            <div class="bmm lightgray"><strong>Bottom Margin (bmm)</strong> <br />Aliquam ultricies libero nec nisl. Donec at leo ut eros posuere facilisis. </div>
        </div>

        <div class="column c6 border ">
            <div class="ltm lightgray"><strong>Left Margin (ltm)</strong> <br />Aliquam ultricies libero nec nisl. Donec at leo ut eros posuere facilisis. </div>
        </div>

        <p class="clear">&nbsp;</p>

        <h2>Containers and Columns</h2>
        <hr />

        <div class="container border">
            <div class="column c10 lightgray">
                <strong>Column 1</strong><br />
                Donec at leo ut eros posuere facilisis. Donec eget arcu in felis tristique dapibus. Aliquam erat volutpat.
            </div>
            <div class="column c10 lightgray">
                <strong>Column 2</strong><br />
                Donec at leo ut eros posuere facilisis. Donec eget arcu in felis tristique dapibus. Aliquam erat volutpat.
            </div>
            <div class="column c10 lightgray">
                <strong>Column 3</strong><br />
                Donec at leo ut eros posuere facilisis. Donec eget arcu in felis tristique dapibus. Aliquam erat volutpat.
            </div>
            <div class="column c21 lightgray prepend-top">
                <strong>Column 4</strong><br />
                Donec at leo ut eros posuere facilisis. Donec eget arcu in felis tristique dapibus. Aliquam erat volutpat.
            </div>
        </div>

        <p class="clear">&nbsp;</p>

        <h2>Boxes and Backdrop</h2>
        <hr />

        <div class="column c26">
            <div class="rax-box column c5 r5"><strong>rax-box </strong><br />Lorem ipsum dolor sit amet <a href="#">Click here</a></div>
            <div class="rax-box alert column c5 r5" ><strong>rax-box alert </strong><br />Consectetuer adipiscing elit. <a href="#">Click here</a></div>
            <div class="rax-box success column c5 r5"><strong>rax-box success</strong><br />Ultricies nec, pellentesque eu <a href="#">Click here</a></div>
            <div class="rax-box error column c5 r5"><strong>rax-box error</strong><br />Donec quam felis, ultricies nec <a href="#">Click here</a></div>
            <div class="rax-box info column c5 r5 tpm"><strong>rax-box info </strong><br />Donec quam felis, ultricies nec <a href="#">Click here</a></div>
            <div class="rax-box alert column c5 r5 tpm" ><strong class="box-title">box-title</strong>Consectetuer adipiscing elit. <a href="#">Click here</a></div>
            <div class="rax-box success column c5 r5 tpm last"><strong class="box-title">box-title</strong>Ultricies nec, pellentesque eu <a href="#">Click here</a></div>
        </div>

        <div id="pnl1" class="rax-backdrop column c10 last">
            <div class="white round pad">
                <strong>rax-backdrop</strong><hr />
                <p>Quisque ut velit convallis leo tristique placerat. Quisque congue tortor et urna. Aliquam porta, sapien vehicula fermentum posuere, velit libero faucibus urna, a consequat mi massa sed mauris. Cras velit lorem, pellentesque eu, suscipit a, mollis et, urna.</p>
            </div>
        </div>

        <hr class="space"/>

        <div class="container ">
            <div class="rax-backdrop left rtm " title=".rax-backdrop" style="width:330px; background:#ddd">
                <div class="rax-box round">
                    <h3>Modifed Backdrop</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
                </div>
            </div>

            <div class="rax-backdrop left" title=".rax-backdrop" style="width:330px; background:#f1f6dd; margin-left:20px">
                <div class="rax-box success round pad" >
                    <h3 >Modifed Backdrop</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
                </div>
            </div>
        </div>

        <p class="clear">&nbsp;</p>

        <h2>Surfaces</h2>
        <hr />

        <div class="container">
            <div class="rax-header-pal round rax-glossy tpm c10 r5 column border1">
                <h3 class="bottom hlf-pad">rax-glossy </h3>
                <p class="hlf-pad">Lorem ipsum cu nam impedit efficiantur, ei aperiri dissentiet eos, mea dico error saperet in.</p>
            </div>
            <div class="rax-header-pal round rax-metalic tpm c10 r5 column border1">
                <h3 class="bottom hlf-pad">rax-metalic</h3>
                <p class="hlf-pad">Lorem ipsum cu nam impedit efficiantur, ei aperiri dissentiet eos, mea dico error saperet in.</p>
            </div>
            <div class="rax-header-pal round rax-glass tpm c10 r5 column border1">
                <h3 class="bottom hlf-pad">rax-glass</h3>
                <p class="hlf-pad">Lorem ipsum cu nam impedit efficiantur, ei aperiri dissentiet eos, mea dico error saperet in.</p>
            </div>
        </div>

        <p class="clear">&nbsp;</p>

        <h2>Palettes</h2>
        <hr />

        <div class="container">
            <div class="rax-background-pal border1 round tpm c10 r5 column">
                <h3 class="bottom hlf-pad">rax-background-pal</h3>
                <p class="hlf-pad">Lorem ipsum cu nam impedit efficiantur, ei aperiri dissentiet eos, mea dico error saperet in.</p>
            </div>
            <div class="rax-header-pal border1 round tpm c10 r5 column">
                <h3 class="bottom hlf-pad">rax-header-pal</h3>
                <p class="hlf-pad">Lorem ipsum cu nam impedit efficiantur, ei aperiri dissentiet eos, mea dico error saperet in.</p>
            </div>
            <div class="rax-toolbar-pal border1 round tpm c10 r5 column">
                <h3 class="bottom hlf-pad">rax-toolbar-pal</h3>
                <p class="hlf-pad">Lorem ipsum cu nam impedit efficiantur, ei aperiri dissentiet eos, mea dico error saperet in.</p>
            </div>
            <div class="rax-footer-pal border1 round tpm c10 r5 column">
                <h3 class="bottom hlf-pad">rax-footer-pal</h3>
                <p class="hlf-pad">Lorem ipsum cu nam impedit efficiantur, ei aperiri dissentiet eos, mea dico error saperet in.</p>
            </div>
            <div class="rax-content-pal border1 round tpm c10 r5 column">
                <h3 class="bottom hlf-pad">Content Pal</h3>
                <p class="hlf-pad">Lorem ipsum cu nam impedit efficiantur, ei aperiri dissentiet eos, mea dico error saperet in.</p>
            </div>
            <div class="rax-active-pal border1 round tpm c10 r5 column">
                <h3 class="bottom hlf-pad">rax-active-pal</h3>
                <p class="hlf-pad">Lorem ipsum cu nam impedit efficiantur, ei aperiri dissentiet eos, mea dico error saperet in.</p>
            </div>
            <div class="rax-inactive-pal border1 round tpm c10 r5 column">
                <h3 class="bottom hlf-pad">rax-inactive-pal</h3>
                <p class="hlf-pad">Lorem ipsum cu nam impedit efficiantur, ei aperiri dissentiet eos, mea dico error saperet in.</p>
            </div>
            <div class="rax-hover-pal border1 round tpm c10 r5 column">
                <h3 class="bottom hlf-pad">rax-hover-pal</h3>
                <p class="hlf-pad">Lorem ipsum cu nam impedit efficiantur, ei aperiri dissentiet eos, mea dico error saperet in.</p>
            </div>
            <div class="rax-selected-pal border1 round tpm c10 r5 column">
                <h3 class="bottom hlf-pad">rax-selected-pal</h3>
                <p class="hlf-pad">Lorem ipsum cu nam impedit efficiantur, ei aperiri dissentiet eos, mea dico error saperet in.</p>
            </div>
            <div class="rax-itm-pal border1 round tpm c10 r5 column">
                <h3 class="bottom hlf-pad">rax-itm-pal</h3>
                <p class="hlf-pad">Lorem ipsum cu nam impedit efficiantur, ei aperiri dissentiet eos, mea dico error saperet in.</p>
            </div>
            <div class="rax-alt-pal border1 round tpm c10 r5 column">
                <h3 class="bottom hlf-pad">rax-alt-pal</h3>
                <p class="hlf-pad">Lorem ipsum cu nam impedit efficiantur, ei aperiri dissentiet eos, mea dico error saperet in.</p>
            </div>
            <div class="rax-error-pal border1 round tpm c10 r5 column">
                <h3 class="bottom hlf-pad">rax-error-pal</h3>
                <p class="hlf-pad">Lorem ipsum cu nam impedit efficiantur, ei aperiri dissentiet eos, mea dico error saperet in.</p>
            </div>
            <div class="rax-alert-pal border1 round  tpm c10 r5 column">
                <h3 class="bottom hlf-pad">rax-alert-pal</h3>
                <p class="hlf-pad">Lorem ipsum cu nam impedit efficiantur, ei aperiri dissentiet eos, mea dico error saperet in.</p>
            </div>
            <div class="rax-success-pal border1 round tpm c10 r5 column">
                <h3 class="bottom hlf-pad">rax-success-pal</h3>
                <p class="hlf-pad">Lorem ipsum cu nam impedit efficiantur, ei aperiri dissentiet eos, mea dico error saperet in.</p>
            </div>
            <div class="rax-info-pal border1 round tpm c10 r5 column">
                <h3 class="bottom hlf-pad">rax-info-pal</h3>
                <p class="hlf-pad">Lorem ipsum cu nam impedit efficiantur, ei aperiri dissentiet eos, mea dico error saperet in.</p>
            </div>
        </div>

        <p class="clear">&nbsp;</p>

        <h2>Tables &amp; Buttons</h2>
        <hr />

        <table class="rax-table column border c20" border="0" cellspacing="0"  cellpadding="0" summary="Basic table with caption">
            <caption>Basic table with caption</caption>
            <thead>
                <tr class="tbl-header">
                    <th>Name</th><th>Color</th><th>Qty</th><th>Price</th><th>Payment</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Bread</td><td>White</td><td>2 Lbs</td><td>$12.40</td><td>CC</td>
                </tr>
                <tr class="even">
                    <td>Butter</td><td>Yellow</td><td>1 Lbs</td><td>$8.20</td><td>DB</td>
                </tr>
                <tr>
                    <td>Milk</td><td>Cherry</td><td>4 Qtr</td><td>$21.50</td><td>Cash</td>
                </tr>
                <tr class="even">
                    <td>Bun</td><td>Brown</td><td>3 Lbs</td><td>$6.50</td><td>Cash</td>
                </tr>
            </tbody>
        </table>

        <table class="rax-table column border c17 last" border="0" cellspacing="0" cellpadding="0" summary="Table with header class">
            <caption class="white">Table with header class</caption>
            <thead>
                <tr class="tbl-header">
                    <th>Name</th><th>Color</th><th>Qty</th><th>Price</th><th>Payment</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Bread</td><td>White</td><td>2 Lbs</td><td>$12.40</td><td>CC</td>
                </tr>
                <tr class="even">
                    <td>Butter</td><td>Yellow</td><td>1 Lbs</td><td>$8.20</td><td>DB</td>
                </tr>
                <tr>
                    <td>Milk</td><td>Cherry</td><td>4 Qtr</td><td>$21.50</td><td>Cash</td>
                </tr>
                <tr class="even">
                    <td>Flour</td><td>White</td><td>3 Lbs</td><td>$6.50</td><td>Cash</td>
                </tr>
            </tbody>
        </table>

        <table class="rax-table column border c20" border="0" cellspacing="0"  cellpadding="0" summary="Table with sort class">
            <caption class="white">Table with sort class</caption>
            <thead>
                <tr class="tbl-header">
                    <th>Name</th><th>Color</th><th>Qty</th><th class="sort">Price</th><th>Payment</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Flour</td><td>Brown</td><td>3 Lbs</td><td class="sort">$6.50</td><td>Cash</td>
                </tr>
                <tr class="even">
                    <td>Butter</td><td>Yellow</td><td>1 Lbs</td><td class="sort">$8.20</td><td>DB</td>
                </tr>
                <tr>
                    <td>Bread</td><td>White</td><td>2 Lbs</td><td class="sort">$12.40</td><td>CC</td>
                </tr>
                <tr class="even">
                    <td>Milk</td><td>Cherry</td><td>4 Qtr</td><td class="sort">$21.50</td><td>Cash</td>
                </tr>
            </tbody>
        </table>

        <div class="column c15 prepend1 last">
            <p>Buttons</p>
            <button class="button ok">Ok</button>&nbsp;
            <button class="button process">Process</button>&nbsp;
            <button class="button cancel">Cancel</button><br /><br />

            <button class="button continue">Continue</button>&nbsp;
            <button class="button">Button</button>&nbsp;
            <button class="button disabled">Disabled</button>&nbsp;<br /><br />

            <a href="#" class="button">Link Button</a>
            &nbsp;
        </div>

        <p class="clear">&nbsp;</p>

        <h2>Forms</h2>
        <hr />

        <form id="frmAddress" name="frmAddress" action="" method="post">
            <div class="c19 rax-backdrop column">
                <fieldset class="white round">
                    <legend class="border white round" style="margin:0;border-color: #ddd">General</legend>
                    <div class="ctrl-group">
                        <label>Name:</label>
                        <input type="text" name="text1" id="text1" value="" class="textbox c10" /><br />

                    </div>
                    <div class="ctrl-group">
                        <label>Address:</label>
                        <input type="text" name="address" id="address" value="" class="textbox c10" /><br />
                    </div>
                    <div class="ctrl-group">
                        <label>Country:</label>
                        <input type="text" name="country" id="country" value="" class="textbox c10" /><br />
                    </div>
                    <hr />
                    <input type="button" name="savebtn" id="savebtn" value="Save" class="c3 button ok" />&nbsp;
                    <input type="button" name="cancelbtn" id="cancelbtn" value="Cancel" class="c3 button cancel" />
                </fieldset>
            </div>
        </form>

        <form id="frmItem" name="frmItem" action="" method="post">
            <div class="c16 rax-backdrop column">
                <div class="round white pad">
                    <div class="hlf-pad bmm">
                        <span id="nextbtn" class="right ui-icon ui-icon-carat-1-e round lightgray click-cursor" style="margin-left:2px"></span>
                        <span id="prevbtn" class="right ui-icon ui-icon-carat-1-w round lightgray click-cursor"></span>
                        <h3 class="bottom">USB Mouse</h3>
                    </div>
                    <img class="left rtm" src="views/images/mouse.jpg" alt="Mouse" />
                    <p id="infotext">Lorem ipsum cu nam impedit efficiantur, ei aperiri dissentiet eos, mea dico error saperet in.</p>
                    <span class="large loud bold">$10.95</span>&nbsp;<input type="button" name="buybtn" id="buybtn" value="BUY NOW" class="button continue bold ltm"/>
                    <div class="clear"></div>
                </div>
            </div>
        </form>

        <p class="clear">&nbsp;</p>


        <h2 class="right jquery-css-header">Intergrated jQuery UI Icons</h2>

        <h2>Icons</h2>
        <hr />

        <div class="ui-icons">
            <ul id="icons" class="ui-widget ui-helper-clearfix">
                <li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-n"><span class="ui-icon ui-icon-carat-1-n"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-ne"><span class="ui-icon ui-icon-carat-1-ne"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-e"><span class="ui-icon ui-icon-carat-1-e"></span></li>

                <li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-se"><span class="ui-icon ui-icon-carat-1-se"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-s"><span class="ui-icon ui-icon-carat-1-s"></span></li>

                <li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-sw"><span class="ui-icon ui-icon-carat-1-sw"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-w"><span class="ui-icon ui-icon-carat-1-w"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-nw"><span class="ui-icon ui-icon-carat-1-nw"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-carat-2-n-s"><span class="ui-icon ui-icon-carat-2-n-s"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-carat-2-e-w"><span class="ui-icon ui-icon-carat-2-e-w"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-n"><span class="ui-icon ui-icon-triangle-1-n"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-ne"><span class="ui-icon ui-icon-triangle-1-ne"></span></li>

                <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-e"><span class="ui-icon ui-icon-triangle-1-e"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-se"><span class="ui-icon ui-icon-triangle-1-se"></span></li>

                <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-s"><span class="ui-icon ui-icon-triangle-1-s"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-sw"><span class="ui-icon ui-icon-triangle-1-sw"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-w"><span class="ui-icon ui-icon-triangle-1-w"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-nw"><span class="ui-icon ui-icon-triangle-1-nw"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-2-n-s"><span class="ui-icon ui-icon-triangle-2-n-s"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-2-e-w"><span class="ui-icon ui-icon-triangle-2-e-w"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-n"><span class="ui-icon ui-icon-arrow-1-n"></span></li>

                <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-ne"><span class="ui-icon ui-icon-arrow-1-ne"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-e"><span class="ui-icon ui-icon-arrow-1-e"></span></li>

                <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-se"><span class="ui-icon ui-icon-arrow-1-se"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-s"><span class="ui-icon ui-icon-arrow-1-s"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-sw"><span class="ui-icon ui-icon-arrow-1-sw"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-w"><span class="ui-icon ui-icon-arrow-1-w"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-nw"><span class="ui-icon ui-icon-arrow-1-nw"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-n-s"><span class="ui-icon ui-icon-arrow-2-n-s"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-ne-sw"><span class="ui-icon ui-icon-arrow-2-ne-sw"></span></li>

                <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-e-w"><span class="ui-icon ui-icon-arrow-2-e-w"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-se-nw"><span class="ui-icon ui-icon-arrow-2-se-nw"></span></li>

                <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-n"><span class="ui-icon ui-icon-arrowstop-1-n"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-e"><span class="ui-icon ui-icon-arrowstop-1-e"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-s"><span class="ui-icon ui-icon-arrowstop-1-s"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-w"><span class="ui-icon ui-icon-arrowstop-1-w"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-n"><span class="ui-icon ui-icon-arrowthick-1-n"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-ne"><span class="ui-icon ui-icon-arrowthick-1-ne"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-e"><span class="ui-icon ui-icon-arrowthick-1-e"></span></li>

                <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-se"><span class="ui-icon ui-icon-arrowthick-1-se"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-s"><span class="ui-icon ui-icon-arrowthick-1-s"></span></li>

                <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-sw"><span class="ui-icon ui-icon-arrowthick-1-sw"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-w"><span class="ui-icon ui-icon-arrowthick-1-w"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-nw"><span class="ui-icon ui-icon-arrowthick-1-nw"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-n-s"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-ne-sw"><span class="ui-icon ui-icon-arrowthick-2-ne-sw"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-e-w"><span class="ui-icon ui-icon-arrowthick-2-e-w"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-se-nw"><span class="ui-icon ui-icon-arrowthick-2-se-nw"></span></li>

                <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-n"><span class="ui-icon ui-icon-arrowthickstop-1-n"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-e"><span class="ui-icon ui-icon-arrowthickstop-1-e"></span></li>

                <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-s"><span class="ui-icon ui-icon-arrowthickstop-1-s"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-w"><span class="ui-icon ui-icon-arrowthickstop-1-w"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-w"><span class="ui-icon ui-icon-arrowreturnthick-1-w"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-n"><span class="ui-icon ui-icon-arrowreturnthick-1-n"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-e"><span class="ui-icon ui-icon-arrowreturnthick-1-e"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-s"><span class="ui-icon ui-icon-arrowreturnthick-1-s"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-w"><span class="ui-icon ui-icon-arrowreturn-1-w"></span></li>

                <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-n"><span class="ui-icon ui-icon-arrowreturn-1-n"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-e"><span class="ui-icon ui-icon-arrowreturn-1-e"></span></li>

                <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-s"><span class="ui-icon ui-icon-arrowreturn-1-s"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-w"><span class="ui-icon ui-icon-arrowrefresh-1-w"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-n"><span class="ui-icon ui-icon-arrowrefresh-1-n"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-e"><span class="ui-icon ui-icon-arrowrefresh-1-e"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-s"><span class="ui-icon ui-icon-arrowrefresh-1-s"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-4"><span class="ui-icon ui-icon-arrow-4"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-4-diag"><span class="ui-icon ui-icon-arrow-4-diag"></span></li>

                <li class="ui-state-default ui-corner-all" title=".ui-icon-extlink"><span class="ui-icon ui-icon-extlink"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-newwin"><span class="ui-icon ui-icon-newwin"></span></li>

                <li class="ui-state-default ui-corner-all" title=".ui-icon-refresh"><span class="ui-icon ui-icon-refresh"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-shuffle"><span class="ui-icon ui-icon-shuffle"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-transfer-e-w"><span class="ui-icon ui-icon-transfer-e-w"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-transferthick-e-w"><span class="ui-icon ui-icon-transferthick-e-w"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-folder-collapsed"><span class="ui-icon ui-icon-folder-collapsed"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-folder-open"><span class="ui-icon ui-icon-folder-open"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-document"><span class="ui-icon ui-icon-document"></span></li>

                <li class="ui-state-default ui-corner-all" title=".ui-icon-document-b"><span class="ui-icon ui-icon-document-b"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-note"><span class="ui-icon ui-icon-note"></span></li>

                <li class="ui-state-default ui-corner-all" title=".ui-icon-mail-closed"><span class="ui-icon ui-icon-mail-closed"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-mail-open"><span class="ui-icon ui-icon-mail-open"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-suitcase"><span class="ui-icon ui-icon-suitcase"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-comment"><span class="ui-icon ui-icon-comment"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-person"><span class="ui-icon ui-icon-person"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-print"><span class="ui-icon ui-icon-print"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-trash"><span class="ui-icon ui-icon-trash"></span></li>

                <li class="ui-state-default ui-corner-all" title=".ui-icon-locked"><span class="ui-icon ui-icon-locked"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-unlocked"><span class="ui-icon ui-icon-unlocked"></span></li>

                <li class="ui-state-default ui-corner-all" title=".ui-icon-bookmark"><span class="ui-icon ui-icon-bookmark"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-tag"><span class="ui-icon ui-icon-tag"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-home"><span class="ui-icon ui-icon-home"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-flag"><span class="ui-icon ui-icon-flag"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-calculator"><span class="ui-icon ui-icon-calculator"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-cart"><span class="ui-icon ui-icon-cart"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-pencil"><span class="ui-icon ui-icon-pencil"></span></li>

                <li class="ui-state-default ui-corner-all" title=".ui-icon-clock"><span class="ui-icon ui-icon-clock"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-disk"><span class="ui-icon ui-icon-disk"></span></li>

                <li class="ui-state-default ui-corner-all" title=".ui-icon-calendar"><span class="ui-icon ui-icon-calendar"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-zoomin"><span class="ui-icon ui-icon-zoomin"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-zoomout"><span class="ui-icon ui-icon-zoomout"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-search"><span class="ui-icon ui-icon-search"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-wrench"><span class="ui-icon ui-icon-wrench"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-gear"><span class="ui-icon ui-icon-gear"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-heart"><span class="ui-icon ui-icon-heart"></span></li>

                <li class="ui-state-default ui-corner-all" title=".ui-icon-star"><span class="ui-icon ui-icon-star"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-link"><span class="ui-icon ui-icon-link"></span></li>

                <li class="ui-state-default ui-corner-all" title=".ui-icon-cancel"><span class="ui-icon ui-icon-cancel"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-plus"><span class="ui-icon ui-icon-plus"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-plusthick"><span class="ui-icon ui-icon-plusthick"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-minus"><span class="ui-icon ui-icon-minus"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-minusthick"><span class="ui-icon ui-icon-minusthick"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-close"><span class="ui-icon ui-icon-close"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-closethick"><span class="ui-icon ui-icon-closethick"></span></li>

                <li class="ui-state-default ui-corner-all" title=".ui-icon-key"><span class="ui-icon ui-icon-key"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-lightbulb"><span class="ui-icon ui-icon-lightbulb"></span></li>

                <li class="ui-state-default ui-corner-all" title=".ui-icon-scissors"><span class="ui-icon ui-icon-scissors"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-clipboard"><span class="ui-icon ui-icon-clipboard"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-copy"><span class="ui-icon ui-icon-copy"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-contact"><span class="ui-icon ui-icon-contact"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-image"><span class="ui-icon ui-icon-image"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-video"><span class="ui-icon ui-icon-video"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-script"><span class="ui-icon ui-icon-script"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-alert"><span class="ui-icon ui-icon-alert"></span></li>

                <li class="ui-state-default ui-corner-all" title=".ui-icon-info"><span class="ui-icon ui-icon-info"></span></li>

                <li class="ui-state-default ui-corner-all" title=".ui-icon-notice"><span class="ui-icon ui-icon-notice"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-help"><span class="ui-icon ui-icon-help"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-check"><span class="ui-icon ui-icon-check"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-bullet"><span class="ui-icon ui-icon-bullet"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-radio-off"><span class="ui-icon ui-icon-radio-off"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-radio-on"><span class="ui-icon ui-icon-radio-on"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-pin-w"><span class="ui-icon ui-icon-pin-w"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-pin-s"><span class="ui-icon ui-icon-pin-s"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-play"><span class="ui-icon ui-icon-play"></span></li>

                <li class="ui-state-default ui-corner-all" title=".ui-icon-pause"><span class="ui-icon ui-icon-pause"></span></li>

                <li class="ui-state-default ui-corner-all" title=".ui-icon-seek-next"><span class="ui-icon ui-icon-seek-next"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-seek-prev"><span class="ui-icon ui-icon-seek-prev"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-seek-end"><span class="ui-icon ui-icon-seek-end"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-seek-first"><span class="ui-icon ui-icon-seek-first"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-stop"><span class="ui-icon ui-icon-stop"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-eject"><span class="ui-icon ui-icon-eject"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-volume-off"><span class="ui-icon ui-icon-volume-off"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-volume-on"><span class="ui-icon ui-icon-volume-on"></span></li>

                <li class="ui-state-default ui-corner-all" title=".ui-icon-power"><span class="ui-icon ui-icon-power"></span></li>

                <li class="ui-state-default ui-corner-all" title=".ui-icon-signal-diag"><span class="ui-icon ui-icon-signal-diag"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-signal"><span class="ui-icon ui-icon-signal"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-battery-0"><span class="ui-icon ui-icon-battery-0"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-battery-1"><span class="ui-icon ui-icon-battery-1"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-battery-2"><span class="ui-icon ui-icon-battery-2"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-battery-3"><span class="ui-icon ui-icon-battery-3"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-plus"><span class="ui-icon ui-icon-circle-plus"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-minus"><span class="ui-icon ui-icon-circle-minus"></span></li>

                <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-close"><span class="ui-icon ui-icon-circle-close"></span></li>

                <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-e"><span class="ui-icon ui-icon-circle-triangle-e"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-s"><span class="ui-icon ui-icon-circle-triangle-s"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-w"><span class="ui-icon ui-icon-circle-triangle-w"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-n"><span class="ui-icon ui-icon-circle-triangle-n"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-e"><span class="ui-icon ui-icon-circle-arrow-e"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-s"><span class="ui-icon ui-icon-circle-arrow-s"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-w"><span class="ui-icon ui-icon-circle-arrow-w"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-n"><span class="ui-icon ui-icon-circle-arrow-n"></span></li>

                <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-zoomin"><span class="ui-icon ui-icon-circle-zoomin"></span></li>

                <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-zoomout"><span class="ui-icon ui-icon-circle-zoomout"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-check"><span class="ui-icon ui-icon-circle-check"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-plus"><span class="ui-icon ui-icon-circlesmall-plus"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-minus"><span class="ui-icon ui-icon-circlesmall-minus"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-close"><span class="ui-icon ui-icon-circlesmall-close"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-plus"><span class="ui-icon ui-icon-squaresmall-plus"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-minus"><span class="ui-icon ui-icon-squaresmall-minus"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-close"><span class="ui-icon ui-icon-squaresmall-close"></span></li>

                <li class="ui-state-default ui-corner-all" title=".ui-icon-grip-dotted-vertical"><span class="ui-icon ui-icon-grip-dotted-vertical"></span></li>

                <li class="ui-state-default ui-corner-all" title=".ui-icon-grip-dotted-horizontal"><span class="ui-icon ui-icon-grip-dotted-horizontal"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-grip-solid-vertical"><span class="ui-icon ui-icon-grip-solid-vertical"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-grip-solid-horizontal"><span class="ui-icon ui-icon-grip-solid-horizontal"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-gripsmall-diagonal-se"><span class="ui-icon ui-icon-gripsmall-diagonal-se"></span></li>
                <li class="ui-state-default ui-corner-all" title=".ui-icon-grip-diagonal-se"><span class="ui-icon ui-icon-grip-diagonal-se"></span></li>
            </ul>

        </div>

        <p class="clear">&nbsp;</p>

        <h2>Mockup Designs</h2>
        <hr />

        <div class="container c15 column prepend1">
            <div class="rax-background-pal hlf-pad round rax-box-shadow">
                <h3 class="bottom hlf-pad rax-header-pal rax-metalic tpb ltb rtb">
                    <span class="rax-active-pal round right ui-icon ui-icon-triangle-1-s"></span>Header
                </h3>
                <div class="rax-toolbar-pal hlf-pad border clearfix">
                    <span class="ui-icon ui-icon-calculator left column"></span>
                    <span class="ui-icon ui-icon-calendar column round"></span>
                    <span class="ui-icon ui-icon-check column"></span>
                </div>
                <div class="container r10 hlf-pad rax-content-pal bmb ltb rtb">
                    <h3>Content</h3>
                    <p>Lorem ipsum cu nam impedit efficiantur, ei aperiri dissentiet eos, mea dico error saperet in.</p>
                </div>
                <div class="rax-footer-pal hlf-pad rax-metalic tpb ">Ready</div>
            </div>
            <hr class="space"/>
        </div>

        <div class="container c15 column prepend1">
            <h3 class="bottom hlf-pad rax-header-pal rax-box-shadow rax-metalic border">
                <span class="rax-active-pal round right ui-icon ui-icon-triangle-1-s"></span>Header
            </h3>
            <hr class="space"/>
            <h3 class="bottom hlf-pad rax-inactive-pal border rax-metalic">
                <span class="rax-active-pal round right ui-icon ui-icon-triangle-1-s"></span>Header
            </h3>
            <h3 class="bottom hlf-pad rax-selected-pal border rax-glass">
                <span class="rax-active-pal round right ui-icon ui-icon-triangle-1-n"></span>Header
            </h3>
            <div class="hlf-pad rax-content-pal bmb ltb rtb clearfix">
                <h3>Content</h3>
                <p>Lorem ipsum cu nam impedit efficiantur, ei aperiri dissentiet eos, mea dico error saperet in.</p>
                <form name="form1" action="" method="post" class="right">
                    <input type="button" name="button1" id="button1" value="Save" class="rax-box-shadow button process" />&nbsp;
                    <input type="button" name="button1" id="button1" value="Cancel" class="button" />&nbsp;
                </form>
                <hr class="space"/>
            </div>
            <h3 class="bottom hlf-pad rax-inactive-pal border rax-metalic">
                <span class="rax-active-pal round right ui-icon ui-icon-triangle-1-s"></span>Header
            </h3>

        </div>

        <hr class="space" />

        <div class="prepend1 clear">
            <div class="rax-backdrop c25">
                <div class="white pad">
                    <h2 class="box-title bottom rax-metalic">Data Entry</h2>
                    <div class="rax-toolbar-pal rax-metalic pad">Enter your information</div>
                    <form id="frmDataEntry" method="post" class="container rax-content-pal pad">
                        <h3 class="clear bmm">Name <span class="required">*</span></h3>
                        <div class="column ctrl-group">
                            <input type="text" name="ntitle" id="ntitle" value="" size="5" class="textbox"><br><label class="quiet">Title</label>
                        </div>
                        <div class="column ctrl-group">
                            <input type="text" name="fname" id="fname" value="" size="25" class="textbox"><br><label class="quiet">First name</label>
                        </div>
                        <div class="column ctrl-group">
                            <input type="text" name="lname" id="lname" value="" size="25" class="textbox"><br><label class="quiet">Last name</label>
                        </div>
                        <h3 class="clear bmm">Comment</h3>
                        <div class="ctrl-group">
                            <input type="text" name="text1" id="text1" value="" size="50" class="textbox rtm">
                            <input type="button" name="btnSubmit" id="btnSubmit" value="Submit" class="button rax-box-shadow align-middle"><br><label class="quiet">Enter item description:</label>
                        </div>
                        <div class="flashmsg" id="e0x1"></div>
                        <div id="flash1" class="flashmsg"></div>
                    </form>
                </div>
            </div>
        </div>


        <p class="clear">&nbsp;</p>

    </div>

</body>

</html>
